<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p2_盒子模型内间距测试</title>
    <style>
        .d1{
            width: 200px;/* 宽度 */
            height: 200px;/* 高度 */
            background-color: lightcoral;/* 背景颜色 */
            font-size: 30px;/* 文字大小 */
            color: #fff;/* 文字颜色 */
            border: 3px solid #f0ff0f;/* 边框 */
            padding: 20px;/* 内间距 */
            padding: 20px 30px;/* 上下内间距，左右内间距 */
            padding: 20px 30px 40px;/* 上下内间距，左右内间距，下内间距 */
            padding: 20px 30px 40px 50px;/* 上内间距，右内间距，下内间距，左内间距 */
            /*切换盒子模型计算方案为边框盒子 将边框与内间距的大小都算在元素预设的宽高里，不会让元素变大*/
            /*即加了内间距后 会压缩文字*/
            box-sizing: border-box;/*不包含外间距*/
            margin: 50px;/*外间距占据页面空间，但外间距不属于元素本身的大小*/
        }
        span{
            border: 2px solid #00F;
        }
        .s2{
            /*margin: 30px;*/
            padding: 30px;/* 行内元素在垂直方向上的外间距不生效 */
        }
    </style>
</head>
<body>
    <span>span</span><span class="s2">span</span><span>span</span>
    <div class="d1">aaa</div>

</body>
</html>